<template>
  <a-space class="content">
    <icon-font :style="{ fontSize: props.size,color:'#505050'}"  :type="props.type" />
  </a-space>
</template>
<script lang="ts" setup name="a-icon">
import * as Icons from "@ant-design/icons-vue";
import { createFromIconfontCN } from '@ant-design/icons-vue';


//使用 iconfont.cn 阿里图库 如需要更换，请自行在阿里图库中操作，个人采用本地模式(使用线上模式，打包后不一定会有图标)
const props = defineProps({
  icon: {
    type: String,
    required: true
  },
  size:{
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: ""
  }
})

const IconFont =Icons.createFromIconfontCN({
  scriptUrl:"icon.js",//把从阿里图库下载的js文件或者css文件注意此处后缀，放在public文件夹中，然后就可以在scriptUrl中写本地的js了，直接写即可，不需要加路径
});
</script>
<style scoped>
.content{
  display: flex;
  justify-content:center;
  align-items: center;
  cursor: pointer;
  width: 20px;
  height: 100%;

}

</style>
